import React, { useState, useEffect } from 'react'
import { SearchBar, Card, NavBar, List, Image } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { FilterOutline } from 'antd-mobile-icons'
// 调用防抖
import uselodash from '../../hook/uselodash'
import { listIndex } from '../../request/api'
function Index() {
  let [sslist, setsslist] = useState([])
  let nav = useNavigate()
  let [list, setList] = useState([])
  useEffect(() => {
    listIndex().then(res => {
      console.log('list', res)
      if (res.data.code == 200) {
        setList(res.data.data)
      }
    })
  }, [])
  // 搜索
  let ss = uselodash((val) => {
    console.log(val)
    // 调用搜索接口
    listIndex(val).then((res) => {
      console.log('rrr', res)
      if (res.data.code == 200) {
        setsslist(res.data.data)

      }
    })
  }, 1000)

  let tomessage=(item)=>{
    nav(`/message?img=${item.image}&title=${item.title}`)
  }
  return (
    <div>
      <NavBar right={<FilterOutline />} onBack={() => nav(-1)}>发消息</NavBar>
      {/* 搜索框 */}
      <SearchBar
        style={{ width: '80%', '--border-radius': '30px', '--height': '35px', margin: '15px 30px' }}
        onChange={val => ss(val)} placeholder='这里输入关键字' />
      {/* 联系人列表 */}
      <List style={{ display: sslist.length > 0 ? 'none' : 'block' }}> {
        list.length > 0 && list.map((item, index) => {
          return <List.Item onClick={() => ss()}
            key={item.title}
            prefix={
              <Image
                src={item.image}
                style={{ borderRadius: 20 }}
                fit='cover'
                width={40}
                height={40}
              />
            }
            description={item.date}
          >
            {item.title}
          </List.Item>
        })
      } </List>


      {/*搜索 数据 */}
      <List header='基础用法'>
        {
          sslist.length > 0 && sslist.map((item, index) => {
            return <List.Item
            onClick={()=>tomessage(item)}
              key={item.title}
              prefix={
                <Image
                  src={item.image}
                  style={{ borderRadius: 20 }}
                  fit='cover'
                  width={40}
                  height={40}
                />
              }
              description={item.date}
            >
              {item.title}
            </List.Item>
          })
        }

      </List>
    </div>
  )
}

export default Index
